import React, { useMemo } from 'react';
import { gql, useQuery } from '@apollo/client';
import { Descriptions, Typography } from 'antd';

const AccountGql = gql`
  query Account($id: ID!) {
    account(id: $id) {
      id
      username
      password
    }
  }
`;
export const Page2 = () => {
  const {  data } = useQuery(AccountGql, {
    variables: {
      id: 3
    }
  });
  const account = useMemo(() => {
     return data?.account ||  null 
  }, [data])
  console.log(data)
  return <div>
      <Typography.Title level={5}>根据条件查询</Typography.Title>
      {account&& <Descriptions>
          <Descriptions.Item label='id'>{account.id}</Descriptions.Item>
          <Descriptions.Item label='username'>{account.username}</Descriptions.Item>
      </Descriptions> }
     
  </div>
}